<template>
    <div>
        <Title :title="Title"></Title>
        <div ref="right1" style="height: 150px;margin-top: 10px;"></div>
    </div>
</template>
<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
import Title from './Title.vue';
import { Color } from '@antv/g2/lib/dependents';
import { getRegionBBox } from '@antv/g2/lib/util/bbox';
export default {
    data() {
        return {
            Title: '工程使用的设备数量',
            empData: [],
        }
    },
    methods: {
        loadColumn() {
            const columnPlot = new Column(this.$refs.right1, {
                data: this.empData,
                xField: 'type',
                yField: 'value',
                color: 'yellow',
                animation: {
                    // 配置图表第一次加载时的入场动画
                    appear: {
                        animation: 'zoom-in', // 动画效果
                        duration: 5000,  // 动画执行时间
                    },
                },
                columnStyle: {
                    radius: [1000, 0, 10, 10],
                },
                label: {
                    // 可手动配置 label 数据标签位置
                    position: 'middle', // 'top', 'bottom', 'middle',
                    // 配置样式
                    style: {
                        fill: '#FFFFFF',
                        opacity: 0.6,
                    },
                },
                xAxis: {
                    label: {
                        // autoHide: true,
                        // autoRotate: true,
                        autoEllipsis: true
                    },
                },
                meta: {
                    type: {
                        alias: '类别',
                    },
                    sales: {
                        alias: '销售额',
                    },
                },
            });
            columnPlot.render();
        },
        async getEmpData() {
            let res = await get('dashboard/queryEngineerBindDeviceNumber');
            console.log(res, '33333');
            this.empData = res.data;
        },
    },
    async mounted() {
        await this.getEmpData();
        this.loadColumn();
    }
}
</script>
<style lang="less" scoped></style>